<template>
  <v-dialog-layout v-model:visible="visible" width="1000px" @cancel="cancel">
    <v-detail-layout label-width="95px" model="dialog">
      <v-detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测"></v-detail-item>
      <v-detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测"></v-detail-item>
      <v-detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></v-detail-item>
      <v-detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></v-detail-item>
      <v-detail-item
        :span="8"
        label="测试数据超长"
        text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"
      ></v-detail-item>
      <v-detail-item
        :span="8"
        label="测试"
        text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"
      ></v-detail-item>
      <v-detail-item
        :span="8"
        label="测试"
        text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"
      ></v-detail-item>
      <v-detail-item
        :span="24"
        label="测试"
        text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"
      ></v-detail-item>
    </v-detail-layout>
    <template #footer>
      <a-button @click="cancel">取消</a-button>
    </template>
  </v-dialog-layout>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{ visible: boolean }>(), {
  visible: false
})
const emit = defineEmits(['update:visible'])
const cancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped></style>